/*
 * Copyright © 2022 Cask Data, Inc.
 *
 * Licensed under the Apache License, Version 2.0 (the "License"); you may not
 * use this file except in compliance with the License. You may obtain a copy of
 * the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
 * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
 * License for the specific language governing permissions and limitations under
 * the License.
*/

@import "../../../styles/variables.scss";

$border-color: $grey-05;
$input-box-focus-color: #66afe9;
$input-label-color: $grey-03;
$action-button-color: $grey-02;
$regular-font: 14px;
$secondary-btn-color: $brand-primary;

.pipeline-configurations-body {
  .configuration-content {
    width: 100%;
    margin: 16px 30px 40px 30px;
    font-size: $regular-font;
    position: relative;

    .num-records-input {
      margin-left: 5px;
      width: auto;
      border: 1px solid #cccccc;
      border-radius: 4px;
    }

    .num-preview-input-col {
      display: flex;
      flex-direction: column;

      .num-preview-info {
        padding: 3px 0 0 5px;
        font-size: 11px;
      }
    }

    .configuration-content-container {
      /* 50px: height from bottom of buttons to horizontal line */
      height: calc(100% - 50px);
      border-bottom: 1px solid $border-color;

      .configuration-step-content {
        height: 100%;
      }
    }
    .pushdown-config-full-block {
      width: 100%;
      height: 100%;
      display: block;
    }

    .configuration-step-content {
      .step-content-heading {
        font-weight: bold;
        margin-bottom: 16px;
      }

      .label-with-toggle {
        margin-bottom: 15px;
        display: flex;
        align-items: center;

        .toggle-label {
          text-align: right;
          padding-right: 0;
        }

        .toggle-container {
          display: flex;
          align-items: center;

          .fa.fa-info-circle,
          .icon-info-circle {
            margin-left: 10px;
          }
        }

        .small-dropdown {
          width: 65px;
          display: inline-block;
        }
      }

      .num-records-preview {
        align-items: baseline;
      }

      .key-value-pair-labels {
        .key-label,
        .value-label,
        .provided-label {
          color: $input-label-color;
          font-weight: 500;
        }

        .key-label {
          margin-right: 22px;
        }
      }

      .key-value-pair-values {
        margin-top: 10px;

        .key-value-pair-preference {
          margin-bottom: 15px;
          justify-content: initial;

          input[type="text"] {
            border: 1px solid $border-color;
            border-radius: 0.25rem;
            font-size: $regular-font;

            &:focus {
              border-color: $input-box-focus-color;
            }
          }

          .btn-link {
            color: $action-button-color;
            font-size: $regular-font;
            padding: 6px 10px;
          }
        }
      }

      .fa.fa-info-circle,
      .icon-info-circle {
        color: $secondary-btn-color;
        margin-left: 5px;
      }

      .deprecated-warning {
        font-weight: bold;
      }
    }
  }
}
